<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>chat</title>
<link type="text/css" href="<%=request.getContextPath() %>/resource/css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<style type="text/css">
body {
	font-size: 12px;
	font-family: "微软雅黑";
	width: 683px;
	min-height:380px;
	height: auto!important;
	height: 380px;
	overflow: hidden;
	margin: 0;
	padding: 0; 
}

.scroll-pane
{
	width: 683px;
	height: 380px;
	overflow-y: auto;
	
}
.horizontal-only
{
	height: auto;
	max-height: 200px;
}

.jspVerticalBar {
	width: 28px;
}

.jspTrack
{
	width: 23px;
	background: #CAE09A;
	border-left: 1px solid #EDEDED;
	border-right: 1px solid #CCCCCC;
	position: relative;
}

.jspDrag
{
	/* background: #A0C958; */
	width: 22px;
	background: #80A928;
	-moz-box-shadow: 1px 2px 2px #333333; 
	-webkit-box-shadow: 1px 2px 2px #333333;
 	box-shadow: 1px 2px 2px #333333;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
</style>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery/jquery-1.8.2.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/honeycombtool.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/common.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/constants.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/ajax_constants.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jqueryScroll/jquery.mousewheel.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jqueryScroll/jquery.jscrollpane.min.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath() %>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/dwr/util.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/dwr/interface/dwrService.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/dwr/interface/dwrSend.js"></script>

<script>
$(document).ready(function() {
	checkActionIdAndTypeName();
	$("#talkButton").live("mouseover", function() {
		$("#talkButton").css({"background": "#A0C958"});
	});
	$("#talkButton").live("mouseout", function() {
		$("#talkButton").css({"background": "#FFFFFF"});
	});
	$("#talkButton").live("click", wantTalk);
	$("#submitChatButton").live("click", sendMessage);
});
function checkActionIdAndTypeName(){

	var parentNode = $(window).eq(0)[0].parent.document;
	var actionId = $(parentNode).find("#actionId").val();
	var typeName = $(parentNode).find("#actionType").val();
	if (!CHECK.isEmpty(actionId) && !CHECK.isEmpty(typeName)) {
		loadChatHistory(actionId, typeName);
		// 开启ajax的控制反转
		dwr.engine.setActiveReverseAjax(true);
		// 先判断是否登录, 没有登录则不加载聊天的工具
		if (userHadLogin()) {
			loadChat(actionId, typeName);	
		}
	} else {
		window.location.href = WEBROOT +"/play/main";
	}
}
/**
 * 判断用户是否登录, 和jquery.cookie.js一起用
 * */
function userHadLogin() {
	if ($.cookie("userHadLogin") && $.cookie("userHadLogin") === "true") {
		return true;
	}
	return false;
}

function loadChatHistory(actionId, typeName) {
	var firstShowHestoryMaxLength = 20;
	$.ajax({
		url: WEBROOT + "/play/talk/getChatAuoutMessages",
		type: "post",
		dataType: "json",
		data: {
			"actionType": typeName,
			"actionId": actionId
		},
		success: function(res) {
			if (res.result == AjaxMsgConstants.SUCCESS) {
				var messages = res.messages;
				if (messages.length > 0) {
					if (messages.length == firstShowHestoryMaxLength) {
						$("#chatContent").append('<div style="width: 620px; height: 25px; margin: 10px; line-height: 25px; background: #CCCCCC; cursor: pointer; text-align: center;" id="moreHistoryMessage">查看全部聊天记录</div>');
						initShowMoreHestory();
					}
					var showTimeStyle = "yyyy-MM-dd hh:mm:ss";
					for (var i = (messages.length - 1); i >= 0; i--) {
						var msg = messages[i];
						createShowNode(msg, showTimeStyle);
					}
				}
				loadScrollPane();
			} else {
				alert("获取数据失败");
			}
		}
	});
}

function initShowMoreHestory() {
	var moreHistoryMessageNode = $("#moreHistoryMessage");
	moreHistoryMessageNode.click(loadMoreHestoryMessage);
	moreHistoryMessageNode.mouseover(function(){
		$(this).css({"background": "#AAAAAA"});
	});
	moreHistoryMessageNode.mouseout(function(){
		$(this).css({"background": "#CCCCCC"});
	});
}

/* var scrollPaneData; */
function loadScrollPane() {
	createInputHtml();
	var scrollNode = $('.scroll-pane');
	var settings = {
			//showArrows: false, //显示箭头
			autoReinitialise: true, // 自动增长, 改变滚动条长度
			//reinitialiseOnImageLoad: true // 图片加载完后自动刷新
			verticalDragMinHeight: 10 //垂直滚动条最小的高度
	};
	scrollNode.jScrollPane(settings);
	/* scrollPaneData = scrollNode.data("jsp"); */
}

function loadMoreHestoryMessage() {
	var parentNode = $(window).eq(0)[0].parent.document;
	var actionId = $(parentNode).find("#actionId").val();
	var typeName = $(parentNode).find("#actionType").val();
	$.ajax({
		url: WEBROOT + "/play/talk/getChatMessages",
		type: "post",
		dataType: "json",
		data: {
			"actionType": typeName,
			"actionId": actionId
		},
		success: function(res) {
			if (res.result == AjaxMsgConstants.SUCCESS) {
				$("#chatContent").html("");
				var messages = res.messages;
				var showTimeStyle = "yyyy-MM-dd hh:mm:ss";
				for (var i = 0; i < messages.length; i++) {
					var msg = messages[i];
					createShowNode(msg, showTimeStyle);
				}
			} else {
				alert("获取更多历史记录失败");
			}
		}
	});
}

function loadChat(actionId, typeName){
	dwrService.onload(actionId, typeName);
}
function sendMessage(){
	var msg = $("#content").val();
	$("#content").val("");
	if (!CHECK.isEmpty(changeScript(msg))) {
		var message = {"content":msg};
		dwrSend.sendAllUsersMessage(message);
	} else{
		alert("消息不能为空！！");
	}
}
function showMessage(msg){
	if(msg && "" != msg){
		var showTimeStyle = "hh:mm:ss";
		createShowNode(msg, showTimeStyle);
		$("#content").focus();
	} else{
		alert("信息被掏空");
	}
}

function createShowNode(msg, showTimeStyle) {
	var talkTime = new Date();
	talkTime.setTime(msg.time * 1000);
	var showTime = talkTime.format(showTimeStyle);
	// 判断时间修改时间显示方式
	var textHtml = "<div style='width: 630px;height: auto;margin-left: 5px;margin-top: 10px;'>"
						+"<div style='font-size: 15px;color:blue;'>"+msg.authorName+"<span style='font-size: 12px;color:blue;margin-left: 20px;'>"+showTime+"</span></div>"
						+"<div style='margin-top: 2px;font-size: 15px;margin-left: 5px;width: 380px;display:block;word-break: break-all;word-wrap: break-word;'>"+msg.content+"</div>"
				  +"</div>";
	$("#chatContent").append(textHtml);
}
function createInputHtml(){
	var inputHtml = '<div id="talkBox" style="width: 635px; height: 120px; margin: 10px; display: none;margin-bootom:10px;">'+
						'<div style="width:635px; height: 60px;margin-bottom:10px;">'+
							'<textarea style="font-size: 12px; width:633px; height: 58px; border: 1px solid #A0C958; resize: none;margin-bottom:10px;" id="content" ></textarea>'+
						'</div>'+
						/* '<div style="width:80px; height: 25px; border-radius: 5px; line-height:25px; text-align: center; margin: 5px; margin-left: 568px; border: 1px solid #CCCCCC; background: #AED4F5; cursor: pointer; font-size: 14px;" id="submitChatButton">发送</div>'+ */
						'<input type="button" style="width:80px; height: 25px; border-radius: 5px; line-height:25px; text-align: center; margin: 5px; margin-left: 557px; border: 1px solid #CCCCCC; background: #A0C958; cursor: pointer; font-size: 14px;" id="submitChatButton" value="发送">'+
					'</div>'+
					'<div id="talkBottunBox" style="margin: 10px; width: 635px; height: 90px;">'+
						'<div id="talkButton" style="float: right; width: 100px; margin-top:45px; margin-right: 10px; height: 25px; line-height: 25px; border-radius: 3px; border: 1px solid #CCCCCC; cursor: pointer;">'+
							'<div style="float: left; width: 30px; height: 25px;"><img src="'+WEBROOT+'/resource/images/chat/talk.png" style="height: 15px; width: 20px; margin: 5px;"></div>'+
							'<div style="float: left; height: 25px; line-height: 25px;">我也说一句</div>'+
							'<div style="clear: both;"></div>'+
						'</div>'+
						'<div style="clear: both;"></div>'+
					'</div>';
	$(".scroll-pane").append(inputHtml);
	setScrollBottom();
}

function wantTalk() {
	if (userHadLogin()) {
		$("#talkBottunBox").css({"display": "none"});
		$("#talkBox").css({"display": "block"});
	} else {
		var message = "对不起您还未登录,不能进行该操作,请先登录";
		openLoginPage(message);
	}
}

function openLoginPage(message){
	/* window.parent.parent.openChatLogin(message); */
	window.top.openChatLogin(message);
}
function setScrollBottom(){
	var scrollTop = $(".scroll-pane")[0].scrollHeight;
    $(".scroll-pane").scrollTop(scrollTop);
}

function reloadChat() {
	var parentNode = $(window).eq(0)[0].parent.document;
	var actionId = $(parentNode).find("#actionId").val();
	var typeName = $(parentNode).find("#actionType").val();
	loadChat(actionId, typeName);
}
</script> 
</head>
<body>

	<div class="scroll-pane">
		<div id="chatContent" style="width: 640px; height: auto; margin-left: 10px;">
		
		</div>
		<%-- <div id="talkBox" style="width: 680px; height: 90px; line-height: 80px; margin: 10px; display: none;">
			<div style="width:680px; height: 60px;">
				<textarea style="width:678px; height: 58px; border: 1px solid #AED4F5; resize: none;" id="content" ></textarea>
			</div>
			<div style='width:80px; height: 25px; border-radius: 5px; line-height:25px; text-align: center; margin: 5px; margin-left: 568px; border: 1px solid #CCCCCC; background: #AED4F5; cursor: pointer; font-size: 14px;' onclick='sendMessage()'>发送</div>
		</div>
		<div id="talkButton" style="float: right; margin: 10px; width: 100px; height: 25px; line-height: 25px; border-radius: 3px; border: 1px solid #CCCCCC; cursor: pointer;">
			<div style="float: left; width: 30px; height: 25px;"><img src="<%=request.getContextPath() %>/resource/images/chat/talk.png" style="height: 15px; width: 20px; margin: 5px;"></div>
			<div style="float: left; height: 25px; line-height: 25px;">我也说一句</div>
			<div style="clear: both;"></div>
		</div>
		<div style="clear: both;"></div> --%>
	</div>

				
</body>
</html>